{{include './components/head.html' '注册'}}

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">博客系统</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/register"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
        </div>
    </nav>
    <main class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            注册
                        </h3>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="username" class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="remember">请记住我
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>


    </main>

</body>
<script>
    // 注册使用Ajax的方式，提交数据
    var form = document.querySelector('form');
    form.onsubmit = function (e) {
        e.preventDefault();
        // 把表单数据转化成对象
        var data = new FormData(this);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/register');
        xhr.send(data);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                var data = JSON.parse(xhr.responseText);
                if (data.error) {
                    alert(data.msg);


                } else {
                    alert(data.msg);

                }
                // 浏览器端控制页面跳转
                location.href = '/';




            }
        }

    }





</script>

</html>